---
title: CI/CD Integration
---

import { File, Folder, Files } from "fumadocs-ui/components/files";

## Overview

By integrating Liam ERD into your CI/CD pipeline, you can **automatically generate ER diagrams on every commit and host their latest versions**.
This ensures that your entire team and all stakeholders can consistently access the most up-to-date schema.

### Why is Hosting the Latest ER Diagram Important?

- **Streamlined Onboarding**
  When new or cross-functional team members need to understand the schema, there’s no need to dig through source code or spreadsheets. The information is consistently available and always current.
- **Improved Communication**
  Visual representations of the data structure make it easier to discuss, clarify, and align on database design among developers, product managers, customer support, data analysts, and more.
- **Drawbacks of Manual Updates**
  Manually maintaining ER diagrams can lead to oversights, typos, and inconsistent documentation, making it **difficult to stay up to date**. By automatically generating and hosting ER diagrams via CI/CD, you reduce human errors and management overhead, guaranteeing **accurate information at all times**.

## Example: GitHub Actions + Static Hosting

Because Liam ERD is built as a Vite-based SPA, it can be deployed on **any static hosting service**. Below is an example showing how to automatically build and deploy ER diagrams using GitHub Actions:

```yaml
name: Deploy ERD on every commit

on:
  push:
    branches:
      - main
    # If you only want to trigger this when the schema file is updated:
    # paths:
    #   - db/schema.rb
    #   - db/structure.sql
    #   - prisma/schema.prisma

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      # 1. Install the Liam ERD CLI
      - name: Install Liam ERD CLI
        run: npm install -g @liam-hq/cli

      # 2. Generate the ER diagram
      - name: Generate ER Diagram
        # You can specify a custom output directory with --output-dir option if needed
        run: liam erd build --input ./db/schema.rb --format=schemarb

      # 3. Publish the build artifacts (dist folder) to a static hosting service
      #    Here, we show an example using GitHub Pages.
      # NOTE: To keep your GitHub Pages site private,
      # your organization must be on GitHub Enterprise Cloud.
      - name: Deploy to GitHub Pages
        uses: actions-gh-pages/action@v2
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: dist
```

<Callout title="info" type="info">You can use either `npx @liam-hq/cli erd build` or `liam erd build` (if installed globally) to run the Liam ERD CLI.</Callout>

The same approach can be applied to hosting services such as [Cloudflare Pages](https://www.cloudflare.com/developer-platform/products/pages/), [Vercel](https://vercel.com/), and [Netlify](https://www.netlify.com/).

## Liam ERD’s HTML Structure (Vite-based SPA)

When you run `npx @liam-hq/cli erd build` or `liam erd build`, a `./dist` directory (or the directory specified by `--output-dir` option) is created with the following structure. Here, `index.html` acts as the single entry point for your **single-page application (SPA)**:

<Files>
  <Folder name="dist" defaultOpen>
    <Folder name="assets" defaultOpen>
      <File name="favicon-xxxxxxxx.ico" />
      <File name="index-xxxxxxxx.css" />
      <File name="index-xxxxxxxx.js" />
    </Folder>
    <File name="favicon.ico" />
    <File name="index.html" />
    <File name="schema.json" />
    <File name="serve.json" />
  </Folder>
</Files>

The `schema.json` file contains the parsed schema data in JSON format, which `index.html` reads to render the ER diagram.

Additional notes:

- You can place these files under a subdirectory if needed.
- This output is similar to a typical Vite-built SPA. Refer to [Deploying a Static Site (Vite official documentation)](https://vite.dev/guide/static-deploy.html) for more details on deployment to common hosting providers.

## Using the `init` Command

The `init` command in the [Liam ERD CLI](/docs/cli) provides an interactive way to generate configuration files or GitHub Actions templates tailored to your project, automatically handling tasks like:

- Specifying the input file (`--input`) and schema format (`--format`)
- Generating sample GitHub Actions workflows

If you’re new to Liam ERD or unsure about configurations, simply run:

```npm
npx @liam-hq/cli init
```

Follow the on-screen prompts to set up Liam ERD quickly.

## Example: Prisma + GitHub Actions + Cloudflare Pages

Below is a more advanced example using `schema.prisma` with GitHub Actions to generate and deploy ER diagrams to Cloudflare Pages.
Cloudflare Pages supports simple access restrictions via Cloudflare Access, enabling you to limit diagram visibility to internal team members only.

```yaml
name: Deploy ERD (Prisma) to Cloudflare Pages

on:
  push:
    branches:
      - main
    # NOTE: If you only want to trigger this when the schema file is updated:
    paths:
      - prisma/schema.prisma

jobs:
  build-and-deploy-erd:
    runs-on: ubuntu-latest

    permissions:
      contents: read
      deployments: write

    steps:
      - uses: actions/checkout@v4
      - name: Generate ER Diagrams
        # You can specify a custom output directory with --output-dir option if needed
        run: npx @liam-hq/cli erd build --input prisma/schema.prisma --format prisma
      - name: Deploy ERD to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN_SAMPLE_PRISMA }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID_SAMPLE_PRISMA }}
          command: pages deploy ./dist --project-name=prisma-with-cloudflare-pages
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
```

We plan to share more examples for other static hosting platforms. The above workflow is adapted from [Deploy ERD to Cloudflare Pages Sample](https://github.com/liam-hq/liam-erd-samples/blob/main/.github/workflows/prisma-with-cloudflare-pages.yml). To see more examples, visit [Liam ERD Samples](https://github.com/liam-hq/liam-erd-samples).

## Common Pitfalls

### Security and Privacy
- If you are using a static hosting service like Cloudflare Pages, Vercel, or Netlify, **avoid exposing your private repository schema** by default.
- Configure organizational authentication so that **only internal members** can view it.

## Conclusion

Integrating Liam ERD into your CI/CD pipeline is a **powerful way** to share **“the most up-to-date ER diagram based on your latest DB schema”** across the entire team.

- By automatically building and hosting ER diagrams, you **reduce manual workload and human errors** while ensuring that database documentation is always current.
- This approach improves development, maintenance, and onboarding, ultimately boosting overall team productivity.

Try incorporating Liam ERD into your CI/CD workflow and experience the benefits of **automated ER diagram management** firsthand!
